<template>
  <div class="dt-content-project-search">
    <div class="dt-content-project-search-content">
      <!-- @keyup.enter.native="SearchProject" -->
      <el-input v-model="KeyWords" :placeholder="placeholderStr" size="mini" clearable @clear="SearchProject">
        <el-button slot="append" @click="SearchProject">搜索</el-button>
      </el-input>
    </div>
    <div class="dt-content-project-search-btn">
      <el-button-group v-if="ActiveName !== '4' && ActiveName != '3'">
        <el-button :type="RadioValue === '1' ? 'primary' : ''" @click="ChangeModel('1')" size="mini">卡片模式</el-button>
        <el-button :type="RadioValue === '2' ? 'primary' : ''" @click="ChangeModel('2')" size="mini">列表模式</el-button>
      </el-button-group>
      <el-button size="mini" @click="showGuide" v-if="demoPid">使用教程</el-button>
      <div class="dt-content-project-search-btn-line" v-if="ActiveName !== '4' && ActiveName != '3'"></div>
      <el-button size="mini" type="primary" @click="getIsEmployer" class="dt-create-pm">创建项目</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    demoPid: {
      type: [Number]
    },
    ActiveName: {
      type: [String], // 可以是字符串
      required: true, // 必填项
      default: '0' // 如果没有传递，则使用默认值
    }
  },
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      KeyWords: '',
      RadioValue: this.$tools.getQuery(this).elTab == '4' ? '2' : '1', // 默认选中第一个选项
      currenActive: '1'
    }
  },
  computed: {
    placeholderStr() {
      // if (this.ActiveName == '3') {
      //   return '请输入项目名称  / 创建人 / 负责人'
      // }
      return '请输入项目名称/创建人/负责人'
    },
    //是否企业认证用户
    isCompanyUser() {
      return this.$store.state.isCompanyUser
    }
  },
  methods: {
    //引导教程
    showGuide() {
      //  this.dialogVisible.guideStart = true
      this.ChangeModel('1')
      this.$root.$emit('guide-to-start')
    },
    // startGuide() {
    //   this.dialogVisible.guideStart = false
    //   this.$root.$emit('guide-to-0')
    // },
    // quitGuide() {
    //   this.dialogVisible.guideStart = false
    // },
    //创建项目
    goCreatePm() {
      this.$router.push('/main/#/pm?tab=create&elTab=0')
    },
    getIsEmployer(type, queryData) {
      // type类型1外部、2创客
      var data = [{ user_id: this.uid }],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/get_user_info_2019'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.is_person_company != 0) {
                this.goCreatePm()
              } else {
                this.$confirm('创建项目需要完成实名认证，立即前往吗？', '提示', {
                  confirmButtonText: '去认证',
                  cancelButtonText: '取消',
                  cancelButtonClass: 'dt-button-cancle is-plain',
                  type: 'warning'
                })
                  .then(() => {
                    window.open('/myAccountRoleEmployer')
                  })
                  .catch(() => {})
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    SearchProject() {
      if (this.ActiveName === '4') {
        this.$emit('searchProjectLog', this.KeyWords)
      } else {
        this.$emit('searchProject', this.KeyWords)
      }
    },
    ChangeModel(val) {
      this.RadioValue = val
      this.currenActive = val
      this.$emit('changeModel', val)
    },
    onHandleClick() {
      this.KeyWords = ''
    }
  },
  watch: {
    ActiveName(newVal, oldVal) {
      // 执行其他依赖于activeName变化的操作
      if (newVal == '4') {
        this.RadioValue = '2'
        this.$emit('changeModel', '2')
      } else if (newVal == '3') {
        this.RadioValue = '2'
        this.$emit('changeModel', '2')
      } else {
        this.RadioValue = this.currenActive
        this.$emit('changeModel', this.currenActive)
      }
    }
  },
  mounted() {}
}
</script>
<style scoped>
.dt-content-project-search {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  flex-shrink: 0; /* 子项不会收缩 */
}
.dt-content-project-search-content {
  width: 380px;
  padding-left: 16px;
}
.dt-content-project-search-btn {
  padding-right: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dt-content-project-search-btn-line {
  width: 1px;
  height: 14px;
  background-color: #e9eef7;
  margin: 0 20px 0 0;
}
.dt-content-project-search-content >>> .el-input-group__append {
  background-color: #f0f5ff;
}
.dt-content-project-search-content >>> .el-input__inner {
  color: #1f1f1f;
}
.dt-content-project-search-content >>> .el-button {
  color: #2f54eb;
  background-color: #f0f5ff;
  padding: 0px 20px;
}
.el-button-group {
  margin-right: 20px;
}
</style>
